import React, { PureComponent } from 'react';
import { connect } from 'dva';
// import { Card, Button, Icon, List } from 'antd';
import { Select, List, Dropdown, Icon, Menu, MenuItem, Button } from 'antd';
import ImageWrapper from '../../components/Demos/ImageWrapper'; // 注意保证引用路径的正确
import styles from './demo.less';

const Option = Select.Option;

// decorator 装饰器: 把 Model 中对应的 state.demos 添加到组件中, 以 props 的形式;
@connect(state => ({
  demos: state.demos,
}))
export default class ReactDemo1 extends PureComponent {
  // 在组件的声明周期钩子， 调用 reducers:
  componentDidMount() {
    // this.props.dispatch({
    //   // 1. type 对应 model 中的数据模型和方法: demos/ 中的 getList
    //   type: 'demos/getList',
    //   // 2. payload 负责传递所需要的参数;
    //   payload: {
    //     count: 5,
    //   },
    // });
    this.props.dispatch({
      type: 'demos/changeName',
      payload: {
        name: '孙小涛',
      },
    });
  }

  // 获取列表
  getList = () => {
    this.props.dispatch({
      type: 'demos/getList',
    });
  };

  // 改变名字
  changeName = () => {
    this.props.dispatch({
      type: 'demos/changeName',
      payload: {
        name: '新的名字',
      },
    });
  };

  render() {
    const children = [];
    // 调用 props 中与 state 相关的数据:
    // const { list: { list } } = this.props;
    const { demos: { name, list } } = this.props;
    // const list = [{ title: 'aaa' }, { title: 'bbb' }];
    // const menu = (
    //   <Menu>
    //     <Menu.Item>
    //       <a>编辑</a>
    //     </Menu.Item>
    //     <Menu.Item>
    //       <a>删除</a>
    //     </Menu.Item>
    //   </Menu>
    // );
    // const MoreBtn = () => (
    //   <Dropdown overlay={menu}>
    //     <a>更多 <Icon type="down" /></a>
    //   </Dropdown>
    // );
    for (let i = 10; i < 36; i += 1) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + 1}</Option>);
    }
    return (
      <div>
        <h4 className={styles.title}>React Demo1</h4>
        <p className={styles.content}>测试 Css Modules: demo1</p>
        <div>
          <div className="demo-title">测试全局的css</div>
        </div>
        <div>
          <div className={styles.testA}>testAAA</div>
        </div>
        <div>
          <h4>测试 state</h4>
          <div className={styles.testA}>state.name: {name}</div>
        </div>
        <div>
          <div className={styles.testB}>testBBB</div>
        </div>
        <div>
          <h4>测试自定义的组件</h4>
          <ImageWrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="测试图片" />
        </div>
        <div>
          <h4>覆盖 antd 默认的组件 CSS</h4>
          <Select
            mode="multiple"
            style={{ width: 300 }}
            placeholder="请选择"
            className={styles.customSelect}
          >
            {children}
          </Select>
        </div>
        <h4>获取列表：</h4>
        {
          list.map(item => (
            <div key={item.title}>{item.title}</div>
          ))
        }
        <div>
          <h4>测试 dispatch state</h4>
          <Button type="primary" onClick={this.changeName}>改变名字</Button>
          <Button type="primary" onClick={this.getList}>获取列表</Button>
        </div>
      </div>
    );
  }
}
